<!--
 * @Author: LuZeng
 * @Date: 2022-08-29 14:05:42
 * @LastEditTime: 2022-08-31 19:35:08
 * @LastEditors: LuZeng
 * @Description: 小白本白，写的不好多多包涵！！！
 * @FilePath: \jsd:\rjiananzhuang\WEB\WEB workspace\lot-music\src\views\Search\SingerRes.vue
 * 别乱动！
-->
<template>
  <div>
    <ul>
      <li v-for="item in resultList" :key="item.id" @click="toDeatil(item.id)">
        <img :src="item.img1v1Url" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
  
<script>
import { searchAPI } from "@/api";
export default {
  name: "SingerRes",
  data() {
    return {
      resultList: [],
    };
  },
  methods: {
    // 获取搜索信息
    async getResult() {
      const res = await searchAPI({
        keywords: this.keywords,
        type: 100,
        limit: 100,
      });
      this.resultList = res.data.result.artists;
    },
    // 去歌手详情页
    toDeatil(id) {
      this.$router.push({
        name: "detail",
        query: { id },
      });
    },
  },
  computed: {
    keywords() {
      return this.$store.state.search.searchWord;
    },
  },
  created() {
    this.getResult();
  },
};
</script>

<style lang="less" scoped>
ul {
  li {
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    font-size: 16px;
    display: flex;
    cursor: pointer;
    img {
      width: 60px;
      height: 60px;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 4px;
    }
    span {
      display: block;
      margin-left: 10px;
    }
  }
  li:nth-child(2n) {
    background-color: rgb(249, 249, 249);
  }
  li:hover {
    background-color: rgb(240, 241, 242);
  }
}
</style>